---
title: Estrutura de Projetos
description: Aprenda a estruturar um projeto com Astro.
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';

Seu novo projeto Astro gerado a partir do assistente de linha de comando `create astro` já vem com alguns arquivos e diretórios. Outros, você irá criar por si mesmo e adicionar a estrutura de arquivos já existentes do Astro.

Aqui está como um projeto Astro é organizado e alguns arquivos que você irá encontrar no seu novo projeto.

## Diretórios e Arquivos

Astro inclui uma estrutura de diretórios padronizados para o seu projeto. A raiz de qualquer projeto Astro deve incluir os seguintes diretórios e arquivos:

- `src/*` - O código-fonte do seu projeto (componentes, páginas, estilos, etc.)
- `public/*` - Seus arquivos sem código, assets não processados (fontes, ícones, etc.)
- `package.json` - Um manifesto do projeto.
- `astro.config.mjs` - Um arquivo de configuração do Astro. (recomendado)
- `tsconfig.json` - Um arquivo de configuração do TypeScript. (recomendado)

### Exemplo de Árvore do Projeto

Os diretórios de um projeto Astro comum devem se aparecer com isto:

<FileTree>
- public/
  - robots.txt
  - favicon.svg
  - image-social.png
- src/
  - components/
    - Cabecalho.astro
    - Botao.jsx
  - layouts/
    - LayoutPostagem.astro
  - pages/
    - postagens/
      - postagem1.md
      - postagem2.md
      - postagem3.md
    - index.astro
  - styles/
    - global.css
- astro.config.mjs
- package.json
- tsconfig.json
</FileTree>

### `src/`

A pasta src é onde a maioria do código-fonte do seu projeto está. Isso inclui:

- [Páginas](/pt-br/basics/astro-pages/)
- [Layouts](/pt-br/basics/layouts/)
- [Componentes Astro](/pt-br/basics/astro-components/)
- [Componentes de frameworks de UI (React, etc.)](/pt-br/guides/framework-components/)
- [Estilos (CSS, Sass)](/pt-br/guides/styling/)
- [Markdown](/pt-br/guides/markdown-content/)

Astro processa, otimiza e faz bundle dos arquivos de `src/` para criar o website final que é entregue ao navegador. Diferente do estático diretório `public/`, os arquivos de `src/` passam por build e são manipulados para você pelo Astro.

Alguns arquivos (como componentes Astro) nem sequer são enviados ao navegador como foram escritos, mas sim são renderizados como HTML estático. Outros arquivos (como CSS) são enviados ao navegador mas podem ser otimizados e passar por bundle com outros arquivos CSS para melhorar a performance.

:::tip
Enquanto esse guia descreve algumas convenções populares usadas na comunidade do Astro, as únicas pastas reservadas pelo Astro são `src/pages/` e `src/content`. Você é livre para renomear e reorganizar quaisquer outras pastas de uma forma que funciona melhor para você.
:::

### `src/components`

**Componentes** são pedaços reutilizáveis de código para suas páginas HTML. Eles podem ser [componentes Astro](/pt-br/basics/astro-components/) ou [componentes de frameworks de UI](/pt-br/guides/framework-components/) como React ou Vue. É comum agrupar e organizar todos os componentes do seu projeto nesta pasta.

Essa é uma prática comum em projetos Astro, porém não é obrigatória. Sinta-se livre para organizar seus componentes como desejar!

### `src/content`

A pasta `src/content/` é reservada para armazenar [coleções de conteúdo](/pt-br/guides/content-collections/) e um arquivo opcional de configuração das coleções de conteúdo. Nenhum outro arquivo é permitido nesta pasta.

### `src/layouts`

[Layouts](/pt-br/basics/layouts/) são componentes do Astro que definem a estrutura de UI compartilhada por uma ou mais [páginas](/pt-br/basics/astro-pages/).

Assim como o diretório `src/components`, é uma prática comum porém não obrigatória.

### `src/pages`

[Páginas](/pt-br/basics/astro-pages/) são um tipo especial de componente utilizado para criar novas páginas no seu site. Uma página pode ser um componente Astro ou um arquivo Markdown que representa o conteúdo de uma página do seu site.

:::caution
`src/pages` é um subdiretório **obrigatório** em seu projeto Astro. Sem ele, seu site não terá páginas ou rotas!
:::

### `src/styles`

É uma prática comum guardar seus arquivos CSS ou Sass no diretório `src/styles` porém não é obrigatório. Enquanto os seus estilos estiverem em algum lugar do diretório `src/` e forem importados corretamente, Astro irá manipular e otimizar esses arquivos.

### `public/`

O diretório `public/` é para arquivos e assets em seu projeto que não precisam ser processados durante o processo de build do Astro. Arquivos nessa pasta serão copiados para a pasta da build intocados, e então será feito a build do seu site.

Esse comportamento faz com que `public/` seja ideal para assets comuns como imagens e fontes, ou arquivos especiais como `robots.txt` e `manifest.webmanifest`.

Você pode colocar CSS e JavaScript no seu diretório `public/`, porém esteja atento que estes arquivos não passarão por bundle ou serão otimizados na sua build final.

:::tip
Como uma regra geral, qualquer CSS ou JavaScript que você mesmo escrever deve estar no seu diretório `src/`.
:::

### `package.json`

Este é um arquivo utilizado por gerenciadores de pacotes de JavaScript para gerenciar suas dependências. Ele também define scripts que são comumente usados para executar o Astro (ex: `npm start`, `npm run build`).

Existem [dois tipos de dependências](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file) que você pode especificar em um arquivo `package.json`: `dependencies` e `devDependencies`. Na maioria dos casos, elas funcionam da mesma forma: Astro precisa de todas as dependências em tempo de build e seu gerenciador de pacotes irá instalar ambas. Nós recomendados colocar todas as suas dependências em `dependencies` de início e apenas utilizar `devDependencies` se você tiver um motivo específico para fazer isso.

Caso precise de ajuda em como criar um novo arquivo `package.json` para o seu projeto, veja as instruções de [instalação manual](/pt-br/install-and-setup/#instalação-manual).

### `astro.config.mjs`

Este arquivo é gerado em todos os templates iniciais e inclui opções para configurar o seu projeto Astro. Nele você pode especificar quais integrações usar, opções de build, opções do servidor e mais.

Veja o guia [Configurando Astro](/pt-br/reference/configuration-reference/) para mais detalhes em como definir configurações.

### `tsconfig.json`

Este arquivo é gerado em todos os templates iniciais e inclui opções de configuração do TypeScript para seu projeto Astro. Algumas funcionalidades (como importação de pacotes do npm) não são completamente suportadas no editor sem um arquivo `tsconfig.json`.

Veja o guia sobre [TypeScript](/pt-br/guides/typescript/) para mais detalhes em como definir configurações.
